<template>
  <div class="plugin-container">
    <!-- <div class="plugin-title">
      <span>原生插件使用示范</span>
    </div> -->
    <fm-nav-bar title="原生插件使用示范" :border="true">
      <template #left>
        <i class="fm-icon fm-icon-arrow-left" @click="back"></i>
      </template>
    </fm-nav-bar>
    <div class="plugin-list" v-if="this.title == ''">
      <div
        class="plugin-box"
        v-for="item in pluginList"
        :key="item.value"
        :title="item.title"
        @click="handleClick(item)"
      >
        <span class="plugin-name">{{ item.title }}</span>
      </div>
    </div>
    <div class="device-box" v-if="this.title == '设备信息'">
      <div class="device-title">设备信息</div>
      <div class="device-name">设备唯一标识: {{ device.uuid }}</div>
      <div class="device-name">google原生系统版本: {{ device.version }}</div>
      <div class="device-name">平台: {{ device.platform }}</div>
      <div class="device-name">机型: {{ device.model }}</div>
      <div class="device-name">厂商: {{ device.manufacturer }}</div>
      <div class="device-name">是否为模拟器: {{ device.isVirtual }}</div>
      <div class="device-name">设备序列号: {{ device.serial }}</div>
    </div>
    <div class="network-box" v-if="this.title == '网络状态'">
      <div class="network-title">网络状态</div>
      <div class="network-name">{{ states[networkState] }}</div>
    </div>
    <div class="scanner-box" v-if="this.title == '一/二维码扫描'">
      <div class="scanner-title">一/二维码扫描</div>
      <div class="scanner-name">扫描结果: {{ scanner }}</div>
    </div>
    <div class="scanner-box" v-if="this.title == '启动页控制'">
      <div class="scanner-title">启动页控制</div>
    </div>
    <div class="scanner-box" v-if="this.title == '横竖屏控制'">
      <div class="scanner-title">横竖屏控制</div>
      <div class="scanner-name">
        当前屏幕方向: {{ currentScreenOrientation }}
      </div>
      <div class="btn-box">
        <fm-button type="primary" size="small" @click="lockScreen('landscape')">
          横屏锁定
        </fm-button>
        <fm-button type="primary" size="small" @click="lockScreen('portrait')">
          竖屏锁定
        </fm-button>
        <fm-button plain type="primary" size="small" @click="lockScreen">
          取消锁定
        </fm-button>
      </div>
    </div>
    <div class="scanner-box" v-if="this.title == '海康视频监控'">
      <div class="scanner-title">海康视频监控</div>
      <div class="btn-box">
        <fm-button type="primary" size="small" @click="videoPlay('preview')">
          实时视频
        </fm-button>
        <fm-button type="primary" size="small" @click="videoPlay('playback')">
          回放
        </fm-button>
      </div>
    </div>
    <div class="photo-box" v-if="this.title == '相机/相册'">
      <div class="photo-title">相机/相册（多选暂时只展示第一张图片信息）</div>
      <div class="photo-name">路径: {{ photo.images[0].path }}</div>
      <div class="photo-name">宽度: {{ photo.images[0].width }}</div>
      <div class="photo-name">高度: {{ photo.images[0].height }}</div>
      <div class="photo-name">尺寸: {{ photo.images[0].size }}</div>
      <div class="photo-name">唯一资源标识符: {{ photo.images[0].uri }}</div>
      <div class="photo-name">是否原图: {{ photo.isOrigin }}</div>
    </div>
    <div v-if="this.title == '语音识别'">
      <div class="btnList">
        <fm-button round type="primary" @click="startRecorder" size="mini">{{
          btnTitle
        }}</fm-button>
        <fm-button round type="primary" @click="stopRecorder" size="mini"
          >录音结束</fm-button
        >
        <fm-button round type="primary" @click="cancelRecorder" size="mini"
          >录音取消</fm-button
        >
        <div class="volumeView">音量：{{ volumeString }}</div>
        <div class="resultStatus">识别状态：{{ resultStatus }}</div>
        <div class="stringView">识别结果：{{ resulrString }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'plugin',
  data() {
    return {
      pluginList: [
        { title: '设备信息', value: '1' },
        { title: '网络状态', value: '2' },
        { title: '一/二维码扫描', value: '3' },
        { title: '调用系统浏览器', value: '4' },
        { title: '启动页控制', value: '5' },
        { title: '横竖屏控制', value: '6' },
        { title: '海康视频监控', value: '7' },
        { title: '相机/相册', value: '8' },
        { title: '语音识别', value: '9' },
        { title: '小程序', value: '10' },
      ],
      device: {
        uuid: '',
        version: '',
        platform: '',
        model: '',
        manufacturer: '',
        isVirtual: null,
        serial: '',
      },
      scanner: '',
      title: '',
      states: {},
      networkState: '',
      currentScreenOrientation: '', //当前屏幕方向
      //语音识别相关
      btnTitle: '录音识别',
      volumeString: '0',
      resulrString: '',
      resultStatus: '',
      photo: {
        images: '',
        path: '',
        wdith: '',
        height: '',
        size: '',
        uri: '',
        isOrigin: '',
      },
    }
  },
  methods: {
    handleClick(item) {
      if (item.title == '设备信息') {
        if (typeof yuanchu != 'undefined') {
          yuanchu?.device?.getInfo(
            (res) => {
              this.device = res
            },
            (err) => {
              console.log(JSON.stringify(err))
            }
          )
        }
        this.title = '设备信息'
      }
      if (item.title == '网络状态') {
        if (typeof yuanchu != 'undefined') {
          this.networkState = yuanchu?.navigator?.network.connection.type
          this.states[yuanchu.connection.UNKNOWN] = 'Unknown connection'
          this.states[yuanchu.connection.ETHERNET] = 'Ethernet connection'
          this.states[yuanchu.connection.WIFI] = 'WiFi connection'
          this.states[yuanchu.connection.CELL_2G] = 'Cell 2G connection'
          this.states[yuanchu.connection.CELL_3G] = 'Cell 3G connection'
          this.states[yuanchu.connection.CELL_4G] = 'Cell 4G connection'
          this.states[yuanchu.connection.CELL] = 'Cell generic connection'
          this.states[yuanchu.connection.NONE] = 'No network connection'
        }
        this.title = '网络状态'
      }
      if (item.title == '一/二维码扫描') {
        if (typeof yuanchu != 'undefined') {
          yuanchu?.scanner?.openScanner((res) => {
            if (res) {
              this.scanner = res
            }
          })
        }
        this.title = '一/二维码扫描'
      }
      if (item.title == '调用系统浏览器') {
        if (typeof yuanchu != 'undefined') {
          // 1. _self（如果URL在白名单，直接在当前页面跳转；否则在新的原生页面打开）
          // 2. _blank（APP内部新的原生页面打开）
          // 3. _system(使用默认浏览器打开)
          var ref = yuanchu?.inAppBrowser?.open(
            'https://fawkes.cybereng.com/#/',
            '_system',
            ''
          )
          //   ref.addEventListener('loadstart', function (event) {
          //     alert(event.url)
          //   })
        }
      }

      if (item.title == '启动页控制') {
        this.title = '启动页控制'

        if (typeof yuanchu !== 'undefined') {
          const url =
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F22%2F20210722112830_262cd.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642581062&t=d6b8cfed6a35651dc0e735054e47fcc8'

          yuanchu.splashScreen.setUrl({ url }) //设置启动页图片

          yuanchu.splashScreen.show() //显示启动页

          setTimeout(() => {
            yuanchu.splashScreen.hide() //隐藏启动页
          }, 3000)
        }
      }

      if (item.title == '横竖屏控制') {
        this.title = '横竖屏控制'

        if (typeof yuanchu !== 'undefined') {
          this.currentScreenOrientation = yuanchu.screenOrientation.type
        }
      }

      if (item.title == '海康视频监控') {
        this.title = '海康视频监控'
      }

      if (item.title == '相机/相册') {
        if (typeof yuanchu != 'undefined') {
          //拍照
          //   yuanchu?.imagePicker?.takePhoto(
          //     (res) => {
          //       this.photo = res
          //     },
          //     (err) => {
          //       console.log(err)
          //     },
          //     {
          //       width: 1920,
          //       height: 1440,
          //       quality: 50,
          //     }
          //   )
          //获取图片
          yuanchu?.imagePicker?.getPictures(
            (res) => {
              this.photo = res
            },
            (err) => {
              console.log(err)
            },
            {
              maximumImagesCount: 9,
              width: 1920,
              height: 1440,
              quality: 100,
            }
          )
        }
        this.title = '相机/相册'
      }
      if (item.title == '语音识别') {
        this.title = '语音识别'
      }
      if (item.title == '小程序') {
        this.openMini()
        this.title = '小程序'
      }
    },
    back() {
      if (this.title == '') {
        this.$router.push('/home')
      } else {
        this.title = ''
      }
    },
    lockScreen(val) {
      if (typeof yuanchu === 'undefined') {
        return
      }

      if (val) {
        yuanchu.screenOrientation.lock(val)
      } else {
        yuanchu.screenOrientation.unlock()
      }
    },
    videoPlay(val) {
      if (typeof yuanchu === 'undefined') {
        return
      }

      if (val === 'preview') {
        yuanchu.hikVideoPlayer.preview(
          'rtsp://183.134.221.24:554/openUrl/YVsBLq0'
        )
      } else {
        yuanchu.hikVideoPlayer.playback(
          'rtsp://183.134.221.24:554/openUrl/YVsBLq0',
          '2022-02-23 13:08:02',
          '2022-02-23 15:08:04',
          '视频回放'
        )
      }
    },
    //语音识别
    startRecorder() {
      console.log('startRecorder')
      // @{@"state":@"0",@"status":@"识别中...",@"volume": @"8",@"string":@"识别语音文字"}
      yuanchu.speechRecognizer.startRecord(
        [],
        (res) => {
          if (res) {
            this.resultStatus = res.status
            if (res.state === '0') {
              this.volumeString = res.volume
              this.resulrString = res.string
            } else if (res.state === '1') {
              console.log('语音录制识别结束')
              this.volumeString = res.volume
              this.resulrString = res.string
            }
          }
        },
        (err) => {
          console.log('err', err)
          if (err) {
            this.resultStatus = err.status
            this.volumeString = err.volume
          }
        }
      )
    },
    stopRecorder() {
      yuanchu.speechRecognizer.stopRecord(
        (res) => {
          if (res) {
            this.resultStatus = res.status
            this.volumeString = res.volume
          }
        },
        (err) => {
          console.log('err', err)
        }
      )
    },
    cancelRecorder() {
      yuanchu.speechRecognizer.cancelRecord(
        (res) => {
          if (res) {
            this.resultStatus = res.status
            this.volumeString = res.volume
          }
        },
        (err) => {
          console.log('err', err)
        }
      )
    },
    //小程序相关
    openMini() {
      const id = 'demo_yx'
      const name = 'MyDemo'
      const iconUrl = 'https://yxweb.hdec.com:8081/mobile-test1/mini/icon.png'
      const url = 'https://fawkes.cybereng.com/#/'
      const data = {
        id,
        name,
        iconUrl,
        url,
      }
      yuanchu.miniTask.openMini(data, (err) => {
        console.log(`打开失败：${err}`)
      })
    },
  },
  mounted() {
    //初始化语音识别控件
    yuanchu.speechRecognizer.configIFlyAppID('1b4ced69')
    //网络连接监听
    document.addEventListener(
      'online',
      function () {
        // 进行相关处理，如弹出提示
        // your code...
      },
      false
    )
    //网络断开监听
    document.addEventListener(
      'offline',
      function () {
        // 断网
        // 进行相关处理，如弹出提示
        // your code...
      },
      false
    )
  },
}
</script>
<style lang="less" scoped>
.plugin-container {
  height: 100%;
  overflow-y: auto;
  .plugin-list {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .plugin-box {
      background: #f7f8fa;
      margin-bottom: 24px;
      border-radius: 99px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80%;
    }
    .plugin-name {
      color: #323233;
      font-weight: 600;
      font-size: 24px;
      line-height: 80px;
    }
  }
}
.device-box {
  margin-top: 80px;
  padding: 32px;
  .device-title {
    font-weight: 600;
    font-size: 32px;
    line-height: 80px;
    text-align: center;
  }
  .device-name {
    font-weight: 600;
    font-size: 24px;
    line-height: 80px;
    margin-left: 80px;
  }
}

.network-box {
  margin-top: 80px;
  padding: 32px;
  .network-title {
    font-weight: 600;
    font-size: 32px;
    line-height: 80px;
    text-align: center;
  }
  .network-name {
    font-weight: 600;
    font-size: 24px;
    line-height: 80px;
    text-align: center;
  }
}

.scanner-box {
  margin-top: 80px;
  padding: 32px;
  .scanner-title {
    font-weight: 600;
    font-size: 32px;
    line-height: 80px;
    text-align: center;
  }
  .scanner-name {
    font-weight: 600;
    font-size: 24px;
    line-height: 80px;
    margin-left: 80px;
  }

  .btn-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
}

.photo-box {
  margin-top: 80px;
  padding: 32px;
  .photo-title {
    font-weight: 600;
    font-size: 32px;
    line-height: 80px;
    text-align: center;
  }
  .photo-name {
    font-weight: 600;
    font-size: 24px;
    line-height: 80px;
    margin-left: 80px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
}

.btnList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 30px;
}
.btnList > button {
  width: 80%;
  margin: 20px;
}
.volumeView,
.resultStatus {
  width: 100%;
  height: 50px;
  font-size: 30px;
  color: gray;
  margin: 20px;
}
.stringView {
  width: 100%;
  height: 120px;
  font-size: 30px;
  color: gray;
  margin: 20px;
}
</style>